import React, { Component } from 'react'
import axios from 'axios'
import "./MyGrab.scss"

// 引入图片
import myGrab from "../../../assets/images/myGrab"

export default class MyGrab extends Component {
    state = {
       
        myGrab: [],
      };

      componentDidMount() {
        
        axios.get("./json/MyGrab.json").then((res) => {
          let myGrab_str = res.data;
          let myGrab = myGrab_str.data.list;
          // // 过滤掉最后一个
          // myGrab = myGrab.filter((item) => {
          //   return item.sort < 13;
          // });
          this.setState({ myGrab });
        });
      }

      // 跳转详情页
  gotoProductDeatails=(index) => {
    this.props.history.push('/productDetails/'+index)
  }
      
    render() {
        return (
          <div className="myGrab">
            <div className="myGrab-top">
                <p>我的提醒</p>
            </div>
            <div className="top-content">
              <div className="myGrabImg">
                <img src={myGrab} alt="" />
              </div>
              <p>
                <span>菇凉当前暂无关注商品</span>
                <span>来看看已经开始的快抢吧</span>
              </p>
            </div>
            <div className="myGrab-flex-box">
              {this.state.myGrab.map((v, i) => {
                return (
                  <div
                    className="myGrab-item"
                    key={v.iid}
                    onClick={this.gotoProductDeatails.bind(this, i)}
                  >
                    <div className="item-left">
                      <img src={v.image} alt="" />
                    </div>
                    <div className="item-right">
                      <div className="right-title">{v.title}</div>
                      <div className="remaining">
                        <div className="progress-bar">
                          <div
                            className="progress-percent"
                            style={{ width: (140 * v.sales) / v.total }}
                          >
                            {/* {v.myGrabs} */}
                          </div>
                        </div>
                        <span>
                          仅剩<em className="remain">{v.left}</em>件
                        </span>
                      </div>
                      <div className="right-bottom">
                        <div className="bottom-left">
                          <em>￥</em>
                          <span className="myGrabPrice">{v.myGrabPrice}</span>
                          <span className="price">￥{v.price}</span>
                        </div>
                        <div className="bottom-right">
                          <div className="buy">立即购买</div>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        );
    }
}
